<script setup lang="ts">
import { ref, computed, unref, MaybeRef } from "vue"
import {
  Button,
  RestSelectFormatter,
  RestFilter,
  Filter,
  SearchDataSource,
  PaginationParams,
} from "@purchasing/components"
import api from "@/api"

// 使用关键字查询数据
const getSelectOptions: SearchDataSource = (
  params: MaybeRef<{ keyword: string }>,
  pagination: MaybeRef<PaginationParams>,
) => {
  return api.useGetResources(
    computed(() => ({ keyword: unref(params).keyword })),
    pagination,
  )
}

// 将返回的数据格式化为选项
const formatSelectOptions: RestSelectFormatter = (item: any) => ({
  label: item.property1!,
  value: item.property2!,
})

// 查询参数
const searchParams = ref<any>({})

const paginationParams = ref<PaginationParams>({ page: 1, size: 10 })

const { execute } = api.useGetResources(searchParams, paginationParams)

const filters: Filter<any>[] = [
  { key: 1, label: "参数1", prop: "prop1", type: "input" },
  {
    key: 2,
    label: "参数2",
    prop: "prop2",
    type: "select",
    options: [
      { label: "选项1", value: "option1" },
      { label: "选项2", value: "option2" },
    ],
  },
  {
    key: 3,
    label: "参数3",
    prop: "prop3",
    type: "select",
    options: { datasource: getSelectOptions, formatter: formatSelectOptions },
  },
  {
    key: 4,
    span: 2,
    label: "参数4",
    prop: "prop4",
    type: "range-picker",
    // valueFormat: 'YYYY-MM-DD', 配置时间选择器数据格式
  },
  {
    key: 5,
    span: 1,
    label: "字数很多的参数5",
    prop: "prop5",
    type: "range",
  },
  {
    key: 6,
    span: 1,
    label: "字数也很多的参数6",
    prop: "prop6",
    type: "range",
  },
]

function onSearch() {
  paginationParams.value.page = 1
  execute()
}
</script>

<template>
  <div class="pc-p-8">
    <RestFilter v-model="searchParams" :filters="filters">
      <template #default>
        <Button type="primary" @click="onSearch">查询</Button>
      </template>
    </RestFilter>
  </div>
</template>
